<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:insert="~{include :: header('项目列表')}" />
	<th:block th:insert="~{include :: layout-latest-css}" />
	<th:block th:insert="~{include :: bootstrap-select-css}" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>项目名称：</label>
                                <input type="text" name="name"/>
                            </li>
                            <li>
                                <label>项目描述：</label>
                                <input type="text" name="description"/>
                            </li>
                            <li>
                                <label>项目状态：</label>
								<select name="state" id="state" th:with="type=${@dict.getType('pro_projects_state')}">
									<option value="">所有</option>
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
								</select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$.operate.addTab();" shiro:hasPermission="project:project:add">
                    <i class="fa fa-plus"></i> 添加
                </a>
                <a class="btn btn-info" onclick="syncProjectData()" shiro:hasPermission="project:project:sync">
                    <i class="fa fa-refresh"></i> 同步客户数据
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:insert="~{include :: footer}" />
	<th:block th:insert="~{include :: layout-latest-js}" />
	<th:block th:insert="~{include :: bootstrap-select-js}" />
    <script th:inline="javascript">
		var detailFlag = [[${@permission.hasPermi('pm:project:detail')}]];
		var listFlag = [[${@permission.hasPermi('pm:project:list')}]];
        var editFlag = [[${@permission.hasPermi('pm:project:edit')}]];
        var removeFlag = [[${@permission.hasPermi('pm:project:remove')}]];
        var prefix = ctx + "project";

        $(function() {
            var options = {
                url: prefix + "/list",
				detailUrl: prefix + "/detail/{id}",
                createUrl: prefix + "/addProject",
                updateUrl: prefix + "/editProject/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "项目",
				detailView: true,
				detailFormatter: detailFormatter,
				onExpandRow : function(index, row, $detail) {
					initChildTable(index, row, $detail);
				},
                columns: [{
                    checkbox: false,
					visible: false
                },
                {
                    field: 'id',
                    title: '主键ID',
                    visible: false
                },
				{
				    field: 'name',
				    title: '项目名称'
				},
				{
				    field: 'customerName',
				    title: '客户名称'
				},
				{
				    field: 'projectLeaderName',
				    title: '项目负责人',
				    formatter: function(value, row, index) {
				        if (value && value.trim() !== '') {
				            return '<span class="label label-warning">' + value + '</span>';
				        }
				        return '<span class="text-muted">-</span>';
				    }
				},
				{
				    field: 'homepage',
				    title: '项目主页',
				    formatter: function(value, row, index) {
				        if (value && /^(https?:\/\/)/.test(value)) {
				            return '<a href="' + value + '" target="_blank" class="text-primary">' + value + '</a>';
				        }
				        return value;
				    }
				},
				{
				    field: 'domain',
				    title: '域名',
				    formatter: function(value, row, index) {
				        if (value && /^(https?:\/\/)/.test(value)) {
				            return '<a href="' + value + '" target="_blank" class="text-primary">' + value + '</a>';
				        }
				        return value;
				    }
				},
				{
				    field: 'adminDomain',
				    title: '后台',
				    formatter: function(value, row, index) {
				        if (value && /^(https?:\/\/)/.test(value)) {
				            return '<a href="' + value + '" target="_blank" class="text-primary">' + value + '</a>';
				        }
				        return value;
				    }
				},
				{
				    field: 'htmlDomain',
				    title: '静态页',
				    formatter: function(value, row, index) {
				        if (value && /^(https?:\/\/)/.test(value)) {
				            return '<a href="' + value + '" target="_blank" class="text-primary">' + value + '</a>';
				        }
				        return value;
				    }
				},
				{
					visible: editFlag == 'hidden' ? false : true,
					title: '项目状态',
					align: 'center',
					formatter: function (value, row, index) {
						return stateTools(row);
					}
				},
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
						actions.push('<a class="btn btn-primary btn-xs ' + listFlag + '" href="javascript:void(0)" onclick="issueManage(\'' + row.id + '\')"><i class="fa fa-tasks"></i> 需求</a> ');
						actions.push('<a class="btn btn-success btn-xs ' + listFlag + '" href="javascript:void(0)" onclick="companyManage(\'' + row.id + '\')"><i class="fa fa-building"></i> 公司</a> ');
						actions.push('<a class="btn btn-info btn-xs ' + listFlag + '" href="javascript:void(0)" onclick="memberManage(\'' + row.id + '\')"><i class="fa fa-users"></i> 成员</a> ');
						actions.push('<a class="btn btn-warning btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.id + '\', 1200)"><i class="fa fa-search"></i> 详细</a> ');
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')"><i class="fa fa-edit"></i> 编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i> 删除</a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

		/*公司列表*/
		function companyManage(projectId) {
		    var url = ctx + "project/company?projectId=" + projectId;
		    $.modal.openTab("公司管理", url);
		}

		function issueManage(projectId){
			var url = prefix + "/issue/index?goBack=true&projectId=" + projectId;
			$.modal.openTab("需求管理", url);
		}

		/* 项目成员管理 */
		function memberManage(projectId) {
		    var url = prefix + "/member/index?projectId=" + projectId;
		    $.modal.openTab("项目成员管理", url);
		}

		/* 项目成员管理 */
		function memberManage(projectId) {
		    var url = prefix + "/member/index?projectId=" + projectId;
		    $.modal.openTab("项目成员管理", url);
		}
		
		/* 项目状态显示 */
		function stateTools(row) {
		    if (row.state == 0) {
				return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.id + '\')"></i> ';
			} else {
				return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.id + '\')"></i> ';
			}
		}

		/* 项目管理-停用 */
		function disable(id) {
			$.modal.confirm("确认要停用项目吗？", function() {
				$.operate.post(prefix + "/changeState", { "id": id, "state": 0 });
		    })
		}

		/* 项目管理启用 */
		function enable(id) {
			$.modal.confirm("确认要启用项目吗？", function() {
				$.operate.post(prefix + "/changeState", { "id": id, "state": 1 });
		    })
		}

		initChildTable = function(index, row, $detail) {
			var childTable = $detail.html('<table style="table-layout:fixed"></table>').find('table');
		    $(childTable).bootstrapTable({
		        url: ctx + "project/company/list?projectId=" + row.id,
		        method: 'post',
		        sidePagination: "server",
		        contentType: "application/x-www-form-urlencoded",
		        columns: [{
					field : 'companyName', 
					title : '公司',
					cellStyle: function(value, row, index, field) {
						return {
							css: {
								'word-wrap': 'break-word',
								'word-break': 'break-all',
								'white-space': 'normal'
							}
						};
					}
				},
				{
					field : 'companyUrl', 
					title : 'URL',
					cellStyle: function(value, row, index, field) {
						return {
							css: {
								'word-wrap': 'break-word',
								'word-break': 'break-all',
								'white-space': 'normal'
							}
						};
					}
				},
				{
					field : 'merchantName', 
					title : '商家',
					cellStyle: function(value, row, index, field) {
						return {
							css: {
								'word-wrap': 'break-word',
								'word-break': 'break-all',
								'white-space': 'normal'
							}
						};
					}
				},
				{
					field : 'account', 
					title : '账号',
					cellStyle: function(value, row, index, field) {
						return {
							css: {
								'word-wrap': 'break-word',
								'word-break': 'break-all',
								'white-space': 'normal'
							}
						};
					}
				},
				{
		            field: 'estimPrice',
		            title: '预估价',
					cellStyle: function(value, row, index, field) {
						return {
							css: {
								'word-wrap': 'break-word',
								'word-break': 'break-all',
								'white-space': 'normal'
							}
						};
					}
		        },
				{
		            field: 'actualPrice',
		            title: '实际价',
					cellStyle: function(value, row, index, field) {
						return {
							css: {
								'word-wrap': 'break-word',
								'word-break': 'break-all',
								'white-space': 'normal'
							}
						};
					}
		        }]
		    });
		};
		function detailFormatter(index, row) {
			var html = [];
			$.each(row, function(key, value) {
				html.push('<p><b>' + key + ':</b> ' + value + '</p>');
			});
			return html.join('');
		}

        // 同步客户数据函数
        function syncProjectData() {
            layer.confirm('确定要同步第二数据源的客户数据吗？', {
                icon: 3,
                title: '同步确认'
            }, function(index) {
                $.ajax({
                    url: ctx + "system/sync/syncKehuToProject",
                    type: "GET",
                    beforeSend: function() {
                        layer.load(2);
                    },
                    success: function(result) {
                        layer.closeAll();
                        if (result.code == 0) {
                            layer.msg("客户数据同步成功！", {icon: 1});
                            // 刷新表格数据
                            $.table.refresh();
                        } else {
                            layer.msg("客户数据同步失败：" + result.msg, {icon: 2});
                        }
                    },
                    error: function() {
                        layer.closeAll();
                        layer.msg("客户数据同步请求失败", {icon: 2});
                    }
                });
                layer.close(index);
            });
        }
    </script>
</body>
</html>